//判断是否有token
checkLogin()
// 渲染用户名
renderUername()
// 退出登录
logout()
async function fn() {
    const res = await axios.get('/students')
    console.log(res)
    let str = res.data.map(el => {
        return `
        <tr>
        <td>${el.name}</td>
        <td>${el.age}</td>
        <td>${el.gender ? '男' : '女'}</td>
        <td>第${el.group}组</td>
        <td>${el.hope_salary}</td>
        <td>${el.salary}</td>
        <td>${el.province + el.city + el.area}</td>
        <td data-id="${el.id}"> 
        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
        <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
        </td>
        </tr>
        `
    }).join('')
    document.querySelector('.list').innerHTML = str
    document.querySelector('.total').innerHTML = res.data.length
}
fn()
document.querySelector('.list').addEventListener('click', async (e) => {

    if (e.target.classList.contains('bi-trash')) {
        deleteStudent(e.target.parentNode.parentNode.dataset.id)
    }
    if (e.target.classList.contains('bi-pen')) {
        renderUername2(e.target.parentNode.parentNode.dataset.id)
        modalEl.dataset.id = e.target.parentNode.parentNode.dataset.id
    }
})
async function deleteStudent(id) {
    const con = confirm('确定删除吗')
    if (con) {
        await axios.delete(`/students/${id}`)
        showToast('删除成功')
        fn()
    }
}
const modalEl = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalEl)

document.querySelector('#openModal').addEventListener('click', () => {
    modal.show()
})
const proSel = document.querySelector('[name=province]')
const city1 = document.querySelector('[name=city]')
const area1 = document.querySelector('[name=area]')
async function addStudent() {
    const aw = await axios.get('/api/province')
    console.log(aw)
    proSel.innerHTML = '<option value="">省份</option>' + aw.list.map(item => {
        return `<option value="${item}">${item}</option>`
    }).join('')
    proSel.addEventListener('change', async function () {
        const aw1 = await axios.get(`/api/city`, {
            params: {
                pname: proSel.value
            }
        })
        city1.innerHTML = '<option value="">城市</option>' + aw1.list.map(item => {
            return `<option value="${item}">${item}</option>`
        }).join('')
        area1.innerHTML = '<option value="">区县</option>'
    })
    city1.addEventListener('change', async function () {
        const aw2 = await axios.get(`/api/area`, {
            params: {
                pname: proSel.value,
                cname: city1.value
            }
        })
        area1.innerHTML = '<option value="">地区</option>' + aw2.list.map(item => {
            return `<option value="${item}">${item}</option>`
        }).join('')
    })
}
addStudent()

document.querySelector('#submit').addEventListener('click', function () {
    if (modalEl.dataset.id) {
        saveStudent()
        
    }else {
        addStudent1()   
    }
})

const form = document.querySelector('#form')
console.log(form)

async function addStudent1() {

    const data = serialize(form, { hash: true, empty: true })
    data.age = + data.age
    data.hope_salary = + data.hope_salary
    data.salary = + data.salary
    data.group = + data.group
    data.gender = + data.gender
    const res = await axios.post('/students', data)
    showToast(res.message)
    fn()
    modal.hide()
    form.reset()
}

async function renderUername2(id) {
    modal.show()
    document.querySelector('.modal-title').innerHTML = '修改学员'
    const res = await axios.get(`/students/${id}`)
    const arr = ['name', 'age', 'gender', 'group', 'hope_salary', 'salary', 'province', 'city', 'area']
    arr.forEach(item => {
        document.querySelector(`[name=${item}]`).value = res.data[item]
    })
    const { gender } = res.data
    const cks = document.querySelectorAll('[name=gender]')
    cks[gender].checked = true



    const { province, city, area } = res.data
    proSel.value = province
    const cityRes = await axios.get(`/api/city`, {
        params: {
            pname: province
        }
    })
    console.log(cityRes)
    city1.innerHTML = '<option value="">城市</option>' + cityRes.list.map(item => {
        return `<option value="${item}">${item}</option>`
    }).join('')
    city1.value = city

    const res1 = await axios.get(`/api/area`, {
        params: {
            pname: province,
            cname: city
        }
    })
    console.log(res1)
    area1.innerHTML = '<option value="">地区</option>' + res1.list.map(item => {
        return `<option value="${item}">${item}</option>`
    }).join('')


    area1.value = area

}

async function saveStudent() {
    const data = serialize(form, { hash: true, empty: true })
    data.age = + data.age
    data.hope_salary = + data.hope_salary
    data.salary = + data.salary
    data.group = + data.group
    data.gender = + data.gender
    const res = await axios.put(`/students/${modalEl.dataset.id}`, data)
    showToast(res.message)
    fn()
    modal.hide()
    modalEl.dataset.id = ''
    form.reset()
}